<template>
  <div class="w1300">
    <ul>
      <li v-for="item in 5" :key="item">
        <div>
          <h2>某某教授的招生计划</h2>
          <p>
            某某教授的招生计划某某教授的招生计划某某教授的招生计划某某教授的招生计划某某教授的招生计划
          </p>
          <span class="date">2022-06-30</span>
        </div>
        <el-button @click="onEnroll">报名</el-button>
      </li>
    </ul>
    <dialog-comp title="报名" v-model="isEnroll" width="600" top="30px">
      <div class="form-box">
        <form-comp
          v-model:formData="formData"
          :form-item="formItem"
          labelWidth="70"
          size="large"
        >
          <template v-slot:fileSlot>
            <el-upload
              v-model:file-list="fileList"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <el-button type="primary" link>
                点击上传附件
                <el-icon class="el-icon--right"><Plus /></el-icon>
              </el-button>
            </el-upload>
          </template>
        </form-comp>
      </div>
    </dialog-comp>
  </div>
</template>

<script setup lang="ts">
import DialogComp from '@/components/dialog/index.vue'
import FormComp from '@/components/form/form.vue'
import { reactive, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { FormItemType } from '@/components/form/type'

const isEnroll = ref(false)
const formItem = ref<FormItemType[]>([
  { type: 'input', label: '姓名', prop: 'username' },
  { type: 'input', label: '年龄', prop: 'age' },
  {
    type: 'select',
    label: '性别',
    prop: 'sex',
    options: [
      { label: '男', value: 1 },
      { label: '女', value: 2 },
    ],
  },
  { type: 'input', label: '毕业学校', prop: 'school' },
  { type: 'input', label: '电话', prop: 'phone' },
  { type: 'input', label: '邮箱', prop: 'email' },
  { type: 'textarea', label: '个人简介', prop: 'introduce' },
  { type: 'slot', label: '上传附件', prop: 'file', slotName: 'fileSlot' },
])
const formData = reactive({
  username: '',
  age: '',
  sex: '',
  school: '',
  phone: '',
  email: '',
  introduce: '',
})

const onEnroll = () => {
  isEnroll.value = true
}
</script>

<style scoped lang="scss">
.w1300 {
  padding-bottom: 50px;
  ul {
    li {
      border: 1px solid #d2d2d2;
      padding: 19px 37px 19px 15px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 35px;

      h2 {
        font-size: 22px;
        color: #333;
        margin-bottom: 14px;
      }
      p,
      span {
        font-size: 14px;
        color: #666;
        line-height: 18px;
        &.date {
          margin-top: 30px;
        }
      }
      span {
      }
      button {
        width: 100px;
        height: 40px;
        background-color: #234fea;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 14px;
        border: none;
        border-radius: 4px;
      }
    }
  }
  .form-box {
    padding: 0 40px;
  }
}
</style>
